import "../style/header.scss";
import './index.scss'
import React, { useState, useEffect } from "react";
// import Top from "./pages/Top";

import Weather from '../../components/Weather'

import Clock from '../../components/Clock';

import Tiobe from "../../components/Home/Tiobe/Tiobe";
import Mianji from "../../components/Home/Tiobe/Mianji";
import Top from "../../components/Home/middle/top";
import Bottom from "../../components/Home/middle/bottom";
//导入最后的图表文件
import Below from "../../components/Home/below/index";
import Right from "../../components/Home/right/index";

import Themebounced from '../../components/Themebounced'
import { Link } from "react-router-dom";
import { Breadcrumb, Layout, Menu } from "antd";
const { Header, Content, Footer } = Layout;


function App() {
    const [zoomMode, setzoomMode] = useState('');
    // console.log(`settings`, settings);
    useEffect(() => {
        const settings = JSON.parse(localStorage.getItem("settings")) || {};
        // console.log(`settings`, settings);
        if (settings.zoomMode == "stretch") {
            setzoomMode("left_zone");
            console.log(`123`);
        }
        if (settings.zoomMode == "cover") {
            setzoomMode("left_zone_cover");
            console.log(`123`);
        }
        if (settings.zoomMode == "contain") {
            setzoomMode("left_zone_contain");
            console.log(`123`);
        }

    }, []);

    return (
        <Layout className="layout">
            <Header className="logoOne">
                <div className="header">
                    <div className="logo">
                        <a href="http://e-art.top" className="logo" title="关中刀客在青岛">
                            <img
                                src="http://e-art.top/projects/bigScreenCharts/static/img/logo_v0.1_w.png"
                                alt=""
                            />
                        </a>
                    </div>
                    <p>大屏图表适配解决方案</p>
                    <div className="weather">
                        <div className='weatershang'>
                            <Weather province="河北" city="保定" />
                            <Clock />
                        </div>
                        <div className="router">
                            <Link to='/map'>进入地图</Link>
                            <Link to='/earth'>进入3d地球</Link>
                            <Link to='/studyplan'>学习计划进度</Link>
                        </div>
                    </div>
                </div>
            </Header>
            <Themebounced/>
            <Content>
                {/* 上方图表 */}
                <div className="left_col">
                    <div className={zoomMode}>
                        <Tiobe />
                    </div>
                    <div className={zoomMode}>
                        <Top />
                    </div>
                    <div className={zoomMode}>
                        <Right />
                    </div>
                </div>
                {/* 下方图表 */}
                <div className="left_col">
                    <div className={zoomMode}>
                        <Mianji />
                    </div>
                    <div className={zoomMode}>
                        <Bottom />
                    </div>
                    <div className={zoomMode}>
                        <Below />
                    </div>
                </div>
            </Content>
        </Layout >
    );
}
export default App;
